<template>
  <span class="shop_detail_component">
    <el-form-item label="商家名称">
      <el-input placeholder="商家名称" readonly v-model="shopName" class="input-with-select">
          <el-button slot="append" type="primary" icon="el-icon-search" size="small" @click="handlerChoose()" >选择</el-button>
      </el-input>

    </el-form-item>


    <!-- 新增和修改对话框-->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body :close-on-click-modal="false" :before-close="cancelForm">

      <!-- 查询条件 -->
      <el-form size="small" :inline="true" :model="queryParam" class="demo-form-inline">
        <el-form-item label="商家名称" >
          <el-input v-model="queryParam.shopName" placeholder="商家名称" />
        </el-form-item>

        <el-form-item label="手机号">
          <el-input v-model="queryParam.mobile" placeholder="手机号" />
        </el-form-item>


        <el-form-item label="店铺状态">
          <el-select v-model="queryParam.shopStatus" clearable placeholder="店铺状态">
            <el-option v-for="item in dicts.shop_status" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="btnSearch">查询</el-button>
        </el-form-item>
      </el-form>


      <el-table :data="tableData.rows" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column prop="shopId" label="商家编号" width="80" />
        <el-table-column prop="shopName" label="商家名称" width="180" :show-overflow-tooltip="true" />
        <el-table-column prop="mobile" label="联系电话"   />

        <el-table-column label="状态" width="180">
          <template slot-scope="scope">
            <DictTag :dataArray="dicts.shop_status" :value="scope.row.shopStatus"></DictTag>
          </template>
        </el-table-column>

        <!--单选才有操作按钮 -->
        <el-table-column  label="操作" align="center" width="160" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="chooseSubmit(scope.row)" >选择</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页条 -->
      <el-pagination v-if="tableData.total>0" :current-page="queryParam.page" :page-sizes="[1, 5, 10, 20,30,50,100]"
        :page-size="queryParam.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    </el-dialog>



  </span>
</template>

<script>
  import PageMinix from '@/mixin/PageMixin.js'
  import DictDataMinix from '@/mixin/DictDataMinix.js'
  import {dataListApi} from '@/api/shopdetail.js'

  export default {
    mixins: [DictDataMinix, PageMinix],
    // 加载sys_dict_data数据的值
    dicts: ['shop_status'],
    data(){
      return {
        fetchDataApi: dataListApi,
        shopName: undefined,
        title: '商家信息搜索',
        primaryKey: 'shopId',
        open: false,
        //不要执行查询
        executeFetchData: false
      }
    },
    methods: {
      // 确认选择
      chooseSubmit(row) {
        this.shopName = row.shopName
        // 通知父组件做事情  (回调函数)
        this.$emit('callback', row)

        this.cancelForm()
      },
      cancelForm(){
        this.open= false
        //清空数据
        this.queryParam={
          page: 1,
          size: 10
        }

        this.tableData= {
          total: 0,
          rows: []
        }
      },
      //选择商家按钮，显示对话框
      handlerChoose(){
        this.open =true
      },
      // 清空 data中的shopName
      clearData(){
        this.shopName = undefined
      }
    },

  }
</script>

<style>
</style>
